// src/components/popups/sponsorOverview/sponsorCountByProgram/ResultTable.tsx

import type { FC } from 'react';
import type { SponsorByGroupItem } from '@/services/sponsorDashboardService/sponsorCountByProgram';

interface SponsorCountByProgramResultTableProps {
  data: SponsorByGroupItem[];
  sortField: 'program_code' | 'program_year' | 'faculty' | 'coop_program' | 'status' | 'sponsor_count';
  sortDirection: 'asc' | 'desc';
  onSortChange: (field: 'program_code' | 'program_year' | 'faculty' | 'coop_program' | 'status' | 'sponsor_count', direction: 'asc' | 'desc') => void;
}

const ResultTable: FC<SponsorCountByProgramResultTableProps> = ({
  data,
  sortField,
  sortDirection,
  onSortChange
}) => {
  const handleHeaderClick = (field: typeof sortField) => {
    if (sortField === field) {
      onSortChange(field, sortDirection === 'asc' ? 'desc' : 'asc');
    } else {
      onSortChange(field, 'asc');
    }
  };

  const getSortArrow = (field: typeof sortField) => {
    if (sortField !== field) {
      return null;
    }
    return sortDirection === 'asc' ? ' ↑' : ' ↓';
  };

  return (
    <div className="w-full overflow-x-auto mt-4 rounded-2xl shadow bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800">
      <table className="w-full text-xs sm:text-sm md:text-base rounded-2xl overflow-hidden">
        <thead className="bg-blue-50 dark:bg-slate-800 border-b-2 border-gray-200 dark:border-slate-700 shadow-sm">
          <tr>
            <th
              className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap cursor-pointer hover:bg-blue-100 dark:hover:bg-slate-700 transition-colors"
              onClick={() => handleHeaderClick('program_code')}
            >
              Program Code{getSortArrow('program_code')}
            </th>
            <th
              className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap cursor-pointer hover:bg-blue-100 dark:hover:bg-slate-700 transition-colors"
              onClick={() => handleHeaderClick('program_year')}
            >
              Program Year{getSortArrow('program_year')}
            </th>
            <th
              className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap cursor-pointer hover:bg-blue-100 dark:hover:bg-slate-700 transition-colors"
              onClick={() => handleHeaderClick('faculty')}
            >
              Faculty{getSortArrow('faculty')}
            </th>
            <th
              className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap cursor-pointer hover:bg-blue-100 dark:hover:bg-slate-700 transition-colors"
              onClick={() => handleHeaderClick('coop_program')}
            >
              Co-op Program{getSortArrow('coop_program')}
            </th>
            <th
              className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap cursor-pointer hover:bg-blue-100 dark:hover:bg-slate-700 transition-colors"
              onClick={() => handleHeaderClick('status')}
            >
              Status{getSortArrow('status')}
            </th>
            <th
              className="px-4 py-2 text-left font-bold text-gray-700 dark:text-cyan-300 tracking-wide text-xs sm:text-sm md:text-base whitespace-nowrap cursor-pointer hover:bg-blue-100 dark:hover:bg-slate-700 transition-colors"
              onClick={() => handleHeaderClick('sponsor_count')}
            >
              Number of Sponsors{getSortArrow('sponsor_count')}
            </th>
          </tr>
        </thead>
        <tbody>
          {data.length === 0 ? (
            <tr>
              <td colSpan={6} className="text-center py-6 text-gray-400 dark:text-gray-500 italic bg-gray-50 dark:bg-slate-900 rounded-b-2xl text-xs sm:text-sm md:text-base">
                No sponsor records found.
              </td>
            </tr>
          ) : (
            data.map((row, index) => (
              <tr key={`${row.program_code}-${row.program_year}-${row.faculty}-${row.coop_program}-${row.status}-${index}`} className="hover:bg-blue-50 dark:hover:bg-slate-700 transition text-xs sm:text-sm md:text-base border-b border-gray-100 dark:border-slate-700">
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.program_code}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.program_year}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.faculty || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.coop_program || '-'}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.status}
                </td>
                <td className="px-4 py-2 text-gray-800 dark:text-gray-100 border-b border-gray-100 dark:border-slate-700 whitespace-nowrap">
                  {row.sponsor_count}
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default ResultTable;